```vue
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { loginApi } from '@/api/login.js'
import {useUserStore} from "@/stores/user.js";

const router = useRouter()
const userStore = useUserStore()
const role = ref('teacher')
const inputId = ref('')
const inputPwd = ref('')

// 登录
const login = async () => {
  if (!inputId.value || inputId.value === '' || !inputPwd.value || inputPwd.value === '') {
    return ElMessage.error('请输入完整信息')
  }
  const res = await loginApi({userAccount: inputId.value, userPassword: inputPwd.value})
  // console.log(res)
  if (res.code === 200) {
    let currentUserInfo = res.result.user
    let token = res.result.accessToken
    userStore.setUserInfo(currentUserInfo)
    userStore.setToken(token)
    // console.log(localStorage.getItem('token'))
    // console.log(localStorage.getItem('currentUserId'))
    ElMessage.success('登录成功')
    router.push('/home')
  } else {
    ElMessage.error(res.message)
  }
}
</script>

<template>
  <div class="page">
    <div class="wrap">
      <!-- 左侧插图（约 62% 宽） -->
      <section class="left">
        <div class="logo-box">
          <img src="@/assets/images/logo.png" alt="" height="30px">
        </div>
        <img class="illustration" src="@/assets/images/login.png" alt="illustration" />
      </section>

      <!-- 右侧登录卡片（约 38% 宽） -->
      <section class="right">
        <div class="card">
          <div class="tabs">
            <button class="tab" :class="{ active: role === 'teacher' }" @click="role = 'teacher'">教师</button>
            <button class="tab" :class="{ active: role === 'manager' }" @click="role = 'manager'">管理员</button>
          </div>

          <!-- 密码登录表单 -->
          <div class="form">
            <div>
              <div class="field">
                <input v-model.trim="inputId" type="text" placeholder="请输入账号" @keyup.enter="login"/>
              </div>
              <div class="field">
                <input v-model.trim="inputPwd" type="password" placeholder="请输入密码" @keyup.enter="login"/>
              </div>
            </div>

            <button class="primary" @click="login">登录</button>

            <div class="helper">
              忘记密码？<router-link to="find">立即重置</router-link>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>
/* logo盒子 */
.logo-box {
  position: absolute;
  top: -35px;
  left: 40px
}
/* 整页背景 */
.page{
  min-height:100vh;
  background:
      radial-gradient(600px 300px at 85% 8%, rgba(120,120,255,.08), transparent 60%),
      radial-gradient(560px 260px at 8% 92%, rgba(120,120,255,.08), transparent 60%),
      #eef3ff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}

/* 布局容器：宽度与图片比例接近稿件（左62% / 右38%） */
.wrap{
  width:min(1280px, 96vw);
  display:grid;
  grid-template-columns: 62fr 38fr; /* 比例控制 */
  gap:24px;
  align-items:center;
}

/* 左侧 */
.left{
  position:relative;
  display: flex;
  justify-content:flex-end;  /* 让图片靠右对齐 */
  padding-right: 40px;  /* 增加右边距，让图片更靠右 */
}

.brand{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
}
.brand-logo{
  height:36px;
  object-fit:contain;
}

.illustration{
  justify-content: flex-end;
  width: 710px;  /* 设置固定宽度，让图片变瘦 */
  height: 500px;  /* 设置固定高度，比右侧卡片稍高 */
  object-fit: cover;  /* 保持图片比例，裁剪多余部分 */
  display:block;
  border-radius:8px;
}

/* 右侧 */
.right{ display:flex;
  justify-content:flex-start; }

.card{
  height: 450px;
  width: 420px;               /* 减少卡片宽度，让卡片变瘦 */
  background:#fff;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  padding:18px 24px 24px;
}

/* 顶部 tab */
.tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
}
.tab{
  flex:1;
  height:40px;
  border:none;
  background:white;
  color:#666;
  border-radius:8px 8px 0 0;
  cursor:pointer;
}
.tab.active{
  color:white;
  box-shadow:0 -2px 0 0 #c9c9ef inset;
  background:#c7b8ff;
}

/* 表单 */
.form{ padding-top:10px; }

.field{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.field input{
  flex:1;
  height:44px;
  border:1px solid #e6e7ef;
  border-radius:10px;
  padding:0 14px;
  outline:none;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{
  border-color:#b7c3ff;
  box-shadow:0 0 0 3px rgba(91,123,255,.15);
}

/* 按钮 */
.primary{
  width:100%;
  height:50px;
  border:none;
  border-radius:10px;
  background:#8e78e6;
  color:#fff;
  font-size:16px;
  letter-spacing:4px;
  cursor:pointer;
  margin-top:6px;
}

/* 辅助链接 */
.helper{
  text-align:center;
  margin-top:14px;
  color:#777;
  font-size:14px;
}
.helper a{ color:#6b4fd8; text-decoration:none; }

/* 响应式 */
@media (max-width: 1024px){
  .wrap{ grid-template-columns: 1fr; }
  .card{ width:min(420px, 94vw); margin:0 auto; }  /* 调整移动端卡片宽度 */
  .illustration{ height: 400px; width: 500px; }  /* 移动端调整图片尺寸 */
}
</style>